<nav aria-label="Website" class="px-4 lg:px-16 h-14 lg:h-16 w-full max-w-screen-2xl mx-auto print:hidden">
    {% block menu %}
    <ul class="h-full w-full list-none flex flex-row items-center gap-x-2 xl:gap-x-6">
        <li class="ltr:mr-2 rtl:ml-2"><a href="/" class="inline-block w-10 lg:w-12"><img src="{{static('/images/Hedy-logo-96x96-round.png')}}" height="48px" width="48px" alt="{{_('hedy_logo_alt')}}"></a></li>
        <li class="flex-initial menubar-item{% if current_page == 'start' %} active{% endif %}"><a class="menubar-text" href="/" title="{{_('nav_start')}}">{{_('nav_start')}}</a></li>
        <li class="flex-initial menubar-item{% if current_page == 'hedy' %} active{% endif %}"><a class="menubar-text" data-cy="hedy_button" href="/hedy" title="{{_('nav_hedy')}}">{{_('nav_hedy')}}</a></li>
        {% if is_teacher  or is_second_teacher %}
            <li class="flex-initial truncate menubar-item{% if current_page == 'for-teachers' %} active{% endif %}"><a class="menubar-text" data-cy="for_teacher_button" href="/for-teachers" title="{{_('for_teachers')}}">{{_('for_teachers')}}</a></li>
            <li class="flex-initial truncate menubar-item{% if current_page == 'teacher-manual' %} active{% endif %}"><a class="menubar-text" data-cy="manual_button" href="/for-teachers/manual" title="{{_('teacher_manual')}}">{{_('teacher_manual')}}</a></li>
        {% endif %}
        {% if is_admin %}
            <li class="flex-initial truncate menubar-item{% if current_page == 'admin' %} active{% endif %}"><a class="menubar-text" href="/admin">Admin</a></li>
        {% endif %}
        {% if is_super_teacher %}
            <li class="flex-initial truncate menubar-item{% if current_page == 'super_teacher' %} active{% endif %}"><a class="menubar-text" href="/super-teacher">Super Teacher</a></li>
        {% endif %}
        <div class="flex-1"></div><!-- divider -->
    {% if username %}
       <!-- Logged in -->
        <li class="flex-initial menubar-item {% if current_page == 'programs' %} active{% endif %}">
            <a class="menubar-text whitespace-nowrap" data-cy="programs_button" href="/programs">
                <span class="fas fa-fw fa-list-alt"></span>
                <span class="hidden lg:inline-block">{{ _('program_header')}}</span>
            </a>
        </li>
        <li class="flex-initial menubar-item dropdown relative z-20{% if current_page == 'my-profile' %} active{% endif %}" data-cy="user_dropdown">
            <a class="menubar-text cursor-pointer whitespace-nowrap" onclick="$('#profile_dropdown').slideToggle('medium');">
                {% if session.profile_image %}
                    <img src="{{static('/images/profile_images/' + session.profile_image + '.png')}}" class="h-8 lg:h-10 inline-block">
                {% else %}
                    <span class="fas fa-fw fa-user"></span>
                {% endif %}
                <span data-cy="username-menu" class="hidden lg:inline-block">{{username[0]|upper}}{{username[1:]}}
                  {% if get_user_messages() %} ({{ get_user_messages() }}){% endif %}</span>
            </a>
            <div class="dropdown-menu dropdown-blue" id="profile_dropdown" style="display: none;">
                <a class="dropdown-item" data-cy="my_account_button" href="/my-profile"><span class="fas fa-user-cog ltr:mr-4 rtl:ml-4"></span>{{_('my_account')}} {% if get_user_messages() %} ({{ get_user_messages() }}){% endif %}</a>
                <a class="dropdown-item" {% if not has_public_profile %}style="display: none;"{% endif %} data-cy="public_profile_button" href="#" onclick="window.open('/user/{{ username}}')"><span class="fas fa-user ltr:mr-4 rtl:ml-4"></span>{{_('my_public_profile')}}</a>
                <a class="dropdown-item"data-cy="logout_button" href="#" onclick="hedyApp.logout(); return false;"><span class="fas fa-fw fa-sign-out-alt ltr:mr-4 rtl:ml-4"></span>{{_('logout')}}</a>
            </div>
        </li>
    {% else %}
      <!-- Not logged in -->
      <li class="menubar-item dropdown relative z-20">
          {# Needs a 'block' because it contains a flexbox child #}
          <a class="menubar-text block border-transparent cursor-pointer" onclick="$('#language_dropdown').slideToggle('medium'); $('#search_language').focus();" data-cy="language_dropdown_button">
            <div class="flex flex-row gap-2 items-center">
                <i class="fas fa-fw fa-globe"></i>
                <span class="hidden lg:flex">{{ current_language().sym }}</span>
                <svg id="language_arrow" class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
            </div>
          </a>
          <div class="dropdown-menu dropdown-blue h-96 overflow-auto" id="language_dropdown" data-cy="language_dropdown" style="display: none;"
          _="on mutation of @style
                set arrow to #language_arrow
                if *display == 'none'
                    remove .rotate-180 from arrow
                else if not arrow.classList.contains('rotate-180')
                    add .rotate-180 to arrow
                end">
              <div class="mb-4">
                  <input id="search_language" data-cy="search_language" placeholder="{{_('search')}} {{other_languages()|length}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
              </div>
              <div class="flex flex-row flex-wrap w-min justify-start content-start items-start">
                {% for lang in other_languages() %}
                    <div class="dropdown-item language" data-english="{{ lang.english }}" onclick="hedyApp.change_language ('{{lang.lang}}');event.preventDefault();" data-cy="switch_lang_{{lang.lang}}">{{ lang.sym }}</div>
                {% endfor %}
                <a id="add_language_btn" data-cy="add_language_btn" class="add-language-item language" href="https://hosted.weblate.org/new-lang/hedy/adventures/">{{_('add_your_language')}}</a>
              </div>
          </div>
      </li>
      <a class="blue-btn mr-3" href="/login">{{_('login')}}</a>
    {% endif %}
    {% endblock %}
    </ul>
</nav>
